<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {Extent} from 'ol/interaction';
    import {shiftKeyOnly} from 'ol/events/condition';
    import {OSM} from 'ol/source';
    import {Tile as TileLayer} from 'ol/layer';
    import {Fill, Icon, Stroke, Style} from 'ol/style';
    import marker from './data/marker.png'

    export default {
        name: "ExtentInteraction",
        data() {
            return {}
        },
        mounted() {
            //初始化鼠标点的样式
            const image = new Icon({
                src: marker,
                anchor: [0.75, 0.5],
                rotateWithView: true,
            })
            let pointerStyle = new Style({
                image: image,
            });

            //初始化范围盒子的样式
            let boxStyle = new Style({
                stroke: new Stroke({
                    color: 'blue',
                    lineDash: [4],
                    width: 3,
                }),
                fill: new Fill({
                    color: 'rgba(0, 0, 255, 0.1)',
                }),
            });
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }),
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12   //缩放到的级别
                })
            });

            // 创建Extent交互控件
            let extent = new Extent({
                condition: shiftKeyOnly,//激活范围绘制交互控件的条件
                boxStyle: boxStyle,//绘制范围框的样式
                pointerStyle: pointerStyle,//用于绘制范围的光标样式
            });
            this.map.addInteraction(extent);
            // 激活Extent交互控件
            //extent.setActive(true);
            setTimeout(() => {
                let extent1 = extent.getExtent();
                console.log(extent1)
                let extentInternal = extent.getExtentInternal();
                console.log(extentInternal)
            }, 8000)

        },
        methods: {}
    }
</script>

<style scoped>

</style>